<template>
  <div class="dataBox2">
    <div class="chartsBox">
      <dv-charts :option="option" />
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "dataBox2",
  data() {
    return {
      option: {}
    };
  },
  methods: {
    createData() {
      //获取数据
      this.axios
        .get(apis.queryThirdPtFans, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          this.option = {
            grid: {
              left: "10%",
              right: "10%",
              top: "10%",
              bottom: "20%"
            },
            xAxis: {
              data: res.data.result.ptName,
              axisLabel: {
                style: {
                  fill: "#0F88A1",
                  fontSize: 12
                }
              },
              axisLine: {
                style: {
                  stroke: "#0F88A1",
                  lineWidth: 1
                }
              }
            },
            yAxis: {
              data: "value",
              min: 0,
              axisLabel: {
                style: {
                  fill: "#0F88A1",
                  fontSize: 12
                }
              },
              axisLine: {
                style: {
                  stroke: "#0F88A1",
                  lineWidth: 1
                }
              },
              splitLine: {
                show: false
              }
            },
            series: [
              {
                data: res.data.result.fansNum,
                type: "bar",
                barWidth: 21,
                independentColor: true,
                independentColors: [
                  ["#2F9BFF", "#0079E9"],
                  ["#9FFFEC", "#71FFD5"],
                  ["#30DD30", "#57C25E"],
                  ["#FF715A", "#FF4F4F"],
                  ["#FFDF1C", "#FFD800"],
                  ["#FFA42E", "#FF871C"]
                ]
              }
            ]
            // color: ['#28EFB9','#000']
          };
        })
        .catch(function(error) {
          alert(error);
        });
    }
  },
  mounted() {
    this.createData();
  }
};
</script>
<style lang="less">
.dataBox2 {
  padding: 54px 0 0 44px;
  width: 100%;
  height: 304px;
  background: url(../assets/img/border2-2.png) no-repeat center center / 100%
    100%;
}
.chartsBox {
  width: 100%;
  height: 230px;
  
}
</style>